<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="mall/header::head-fragment('Magic_Coffee咖啡店-商品列表','list')">
</head>
<body>
<header th:replace="mall/header::header-fragment"></header>
<content id="content">
    <nav th:replace="mall/header::header-search-fragment"></nav>
    <div class="crumb">
        <div class="w">
            <div class="crumb-con">
                <a href="index.html" class="link">Mall</a>
                <span> > </span>
                <span class="link-text">商品列表</span>
            </div>
        </div>
    </div>

    <div class="page-wrap w">
        <ul class="sort-con">
            <li class="sort-item active" >
                <a th:href="@{'/list?keyword='+${keyword==null?'':keyword}+'&categoryId='+${categoryId==null?'':categoryId}+'&orderBy='}">
                    <div th:class="${orderBy==null || orderBy==''?'active':''}">推荐</div>
                </a>
            </li>
            <li class="sort-item">
                <a th:href="@{'/list?keyword='+${keyword==null?'':keyword}+'&categoryId='+${categoryId==null?'':categoryId}+'&orderBy=price_asc'}">
                    <div>价格<i class="fa fa-sort-asc"></i></div>
                </a>
            </li>
            <li class="sort-item">
                <a th:href="@{'/list?keyword='+${keyword==null?'':keyword}+'&categoryId='+${categoryId==null?'':categoryId}+'&orderBy=price_desc'}">
                    <div>价格<i class="fa fa-sort-desc"></i></div>
                </a>
            </li>

        </ul>
        <!-- list容器 -->
        <ul class="p-list-con">
            <th:block th:if="${#lists.isEmpty(productList)}">
                <p class="err-tip">
                未查询到商品
                </p>
            </th:block>
            <th:block th:unless="${#lists.isEmpty(productList)}">
                <th:block th:each="productList : ${productList}">
                    <li class="p-item">
                        <div class="p-img-con">
                            <a class="link" th:href="@{'./detail.html?productId='+${productList.id}}" target="_blank">
                                <img class="p-img" th:src="@{${productList.imageHost}+${productList.mainImage}}" th:alt="${productList.name}">
                            </a>
                        </div>
                        <div class="p-price-con">
                            <span class="p-price" th:text="'￥' + ${productList.price}">￥price</span>
                        </div>
                        <div class="p-name-con">
                            <a class="p-name" th:href="@{'./detail.html?productId='+${productList.id}}" target="_blank" >[[ ${productList.name} ]]</a>
                        </div>
                    </li>
                </th:block>
            </th:block>
        </ul>
        <!-- 分页容器 -->
<!--        <div class="pagination"></div>-->
        <div class="pages">
            <div class="page_wrap">
                <th:block th:if="${null != pageInfo and !#lists.isEmpty(pageInfo.list)}">
            <span class="page_span1">

                 <a th:href="@{${pageInfo.pageNum==1}?'##':'/list?keyword='+${keyword==null?'':keyword}+'&pageNum=' + ${pageInfo.pageNum-1}+'&categoryId='+${categoryId==null?'':categoryId}+'&orderBy='+${orderBy==null?'':orderBy}}">
                      <div class="disabled-event" th:classappend="${pageInfo.pageNum==1} ? 'disabled' : ''">
                                    < 上一页
                      </div>
                 </a>

                <th:block th:if="${pageInfo.pageNum-2 >=1}"><a
                        th:href="@{'/list?keyword='+${keyword==null?'':keyword}+'&pageNum=' + ${pageInfo.pageNum-2}+'&categoryId='+${categoryId==null?'':categoryId}+'&orderBy='+${orderBy==null?'':orderBy}}"
                        th:text="${pageInfo.pageNum -2}">1</a></th:block>
                <th:block th:if="${pageInfo.pageNum-1 >=1}"><a
                        th:href="@{'/list?keyword='+${keyword==null?'':keyword}+'&pageNum=' + ${pageInfo.pageNum-1}+'&categoryId='+${categoryId==null?'':categoryId}+'&orderBy='+${orderBy==null?'':orderBy}}"
                        th:text="${pageInfo.pageNum -1}">1</a></th:block>
                <a href="##" class="active" th:text="${pageInfo.pageNum}">1</a>
                <th:block th:if="${pageInfo.pageNum+1<=pageInfo.pages}"><a
                        th:href="@{'/list?keyword='+${keyword==null?'':keyword}+'&pageNum=' + ${pageInfo.pageNum+1}+'&categoryId='+${categoryId==null?'':categoryId}+'&orderBy='+${orderBy==null?'':orderBy}}"
                        th:text="${pageInfo.pageNum +1}">1</a></th:block>
                <th:block th:if="${pageInfo.pageNum+2<=pageInfo.pages}"><a
                        th:href="@{'/list?keyword='+${keyword==null?'':keyword}+'&pageNum=' + ${pageInfo.pageNum+2}+'&categoryId='+${categoryId==null?'':categoryId}+'&orderBy='+${orderBy==null?'':orderBy}}"
                        th:text="${pageInfo.pageNum +2}">1</a></th:block>
                 <a th:href="@{${pageInfo.pageNum>=pageInfo.pages}?'##':'/list?keyword='+${keyword==null?'':keyword}+'&pageNum=' + ${pageInfo.pageNum+1}+'&categoryId='+${categoryId==null?'':categoryId}+'&orderBy='+${orderBy==null?'':orderBy}}">
                                    下一页 >
                                </a>
					</span>
                </th:block>
            </div>
        </div>
    </div>



</content>
<div th:replace="mall/general-footer::general-footer-fragment"></div>

<script th:src="@{/admin/plugins/jquery/jquery-3.5.1.min.js}"></script>
<script th:src="@{/mall/js/search.js}" type="text/javascript"></script>

</body>
</html>